<template>
	<view>
		<view class="flex-row flex-items-center" style="height: 48px; width: 100%; background-color: #F4F7FD;"
			:style="{marginTop: $uv.addUnit(statusBarHeight)}">
			<image src="../../static/close.png" style="width: 24px; height: 24px; margin-left: 12px;" @click="back">
			</image>
			<uv-input v-model="searchKey" placeholder="搜索地区" placeholderStyle="color:#95A4B3;font-size:12px;"
				confirmType="search" :autoBlur="true" fontSize="12px" color="#333333" prefixIcon="search"
				prefixIconStyle="fongSize:14px; marginLeft: 12px; color:#313C56;" border="none" shape="circle"
				customStyle="background-color: #FFFFFF; height: 32px; marginLeft: 12px; marginRight: 12px; " @blur="searchInputEnd">
				<template v-slot:suffix>
					<view v-if="searching" class="flex-row-center" style="height: 32px; width: 32px;"
						@click="searchClear">
						<image src="../../static/searchClear.png" style="width: 16px; height: 16px;"></image>
					</view>
					<view v-else class="font-12 font-weight-regular flex-row-center tast_searchBtn" @click="searchTap">
						搜索
					</view>
				</template>
			</uv-input>
			<view class="font-12 font-weight-regular flex-row-center tast_initBtn" @click="reset">
				重置
			</view>
		</view>
		<view  class="">
			<view class="flex-row flex-items-center" style="height: 44px; background-color: #F4F7FD;">
				<uv-tabs :list="tabs" customStyle="" activeStyle="color:#313C56; fontWeight: 500; fontSize: 16px"
					inactiveStyle="color: #95A4B3; fontWight: 500; fontSize: 14px" lineColor="#EB7520" lineWidth="16px"
					lineHeight="4px" @click="tabsTap">
				</uv-tabs>
			</view>
			<uv-index-list v-if="!searching" :index-list="indexList"
				:customNavHeight="$uv.addUnit(statusBarHeight + 92)" inactiveColor="#313C56" activeColor="#EB7520">
				<template v-for="(item, index) in itemArr">
					<uv-index-item>
						<uv-index-anchor :text="indexList[index]" color="#313C56" size="16"
							bgColor="#fff"></uv-index-anchor>
						<view class="list-cell" style="" v-for="(cell, index) in item" @click="tap(cell)">
							<text v-if="tabIndex == 0">{{cell.city}}</text>
							<text v-else>{{`${cell.city} (${cell.country})`}}</text>
							<view class="" style="background-color: #EFF0F4;  margin-right: 18px; height: 1px; margin-top: 12px;">
							</view>
						</view>
					</uv-index-item>
				</template>
			</uv-index-list>
			<view v-else class="">
				<view class="list-cell" v-for="(cell,index) in itemArr" :key="index">
					<text v-if="tabIndex == 0">{{cell.city}}</text>
					<text v-else>{{`${cell.city} (${cell.country})`}}</text>
					<view class="" style="background-color: #EFF0F4;  margin-right: 18px; height: 1px; margin-top: 12px;">
					</view>
				</view>
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import {
		getArea
	} from '@/api/index.js'
	export default {
		data() {
			return {
				searchKey: '',
				searching: false,
				tabIndex: 0,
				tabs: [{
					name: '城市'
				}, {
					name: '其他'
				}],
				indexList: ["A", "B", "C", "D", "E", "F", "G"],
				itemArr: [
					['列表A1', '列表A2', '列表A3'],
					['列表B1', '列表B2', '列表B3'],
					['列表C1', '列表C2', '列表C3'],
					['列表D1', '列表D2', '列表D3'],
					['列表E1', '列表E2', '列表E3'],
					['列表F1', '列表F2', '列表F3'],
					['列表G1', '列表G2', '列表G3']
				],
			}
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - 91 - 12
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 50
			}
		},
		onLoad() {
			this.getAreaDatas()
		},
		methods: {
			reset() {
				this.tap({
					id: 0,
					city: '全部'
				})
			},
			/**
			 * 选择地区
			 * @param {Object} area 选中的地区
			 */
			tap(area) {
				this.$cookie.setArea(area)
				this.$nextTick(() => {
					uni.navigateBack()
				})
			},
			/**
			 * 获取地区数据
			 */
			getAreaDatas() {
				const params = {
					type: this.tabIndex + 1,
					city: this.searchKey
				}
				getArea(params).then((data) => {
					this.formatDatas(data)
				}).catch((err) => {})
			},
			/**
			 * 处理接口数据
			 */
			formatDatas(data) {
				const itemArr = []
				
				if (this.$uv.test.empty(this.searchKey)) {
					const indexList = []
					for (let i = 0; i < data.length; i++) {
						indexList.push(data[i].mark)
						itemArr.push(data[i].areaVo)
					}
					this.indexList = indexList
					this.itemArr = itemArr
				} else{
					for (let i = 0; i < data.length; i++) {
						for (let j = 0; j < data[i].areaVo.length; j++) {
							itemArr.push(data[i].areaVo[j])
						}
					}
					this.itemArr = itemArr
				}
			},
			searchInputEnd(e) {
				if (this.$uv.test.empty(this.searchKey)) {
					this.searchClear()
				} else {
					this.searchTap()
				}
			},
			/**
			 * 搜索按钮事件
			 */
			searchTap() {
				if (!this.searchKey) {
					// TODO 报错: 请输入关键词
					this.$refs.toast.show({
						msg: '请输入关键词'
					})
					return
				}
				this.searching = true
				uni.hideKeyboard()
				this.getAreaDatas()
			},
			/**
			 * 搜索框清除按钮
			 */
			searchClear() {
				this.searching = false
				this.searchKey = ''
				uni.hideKeyboard()
				this.getAreaDatas()
			},
			/**
			 * tabs点击事件
			 */
			tabsTap(item) {
				this.tabIndex = item.index
				this.getAreaDatas()
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.list-cell {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		padding-bottom: 0px;
		overflow: hidden;
		color: #313C56;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		/* border-bottom: 1px solid red; */
	}

	.tast_searchBtn {
		margin-right: 4px;
		color: white;
		width: 48px;
		height: 24px;
		background: linear-gradient(119deg, #EB5C20 0%, #EB9A20 100%);
		border-radius: 12px;
		opacity: 1;
	}
  .tast_initBtn {
    margin-right: 4px;
    color: white;
    width: 48px;
    height: 24px;
    background: linear-gradient(119deg, #EB5C20 0%, #EB9A20 100%);
    border-radius: 12px;
    opacity: 1;
  }
</style>